<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Dom入门</title>
   </head>
   <body>
      <div class="box">123</div>
      <div class="header">我是头部文字</div>
      <p class="nav">导航栏</p>
      <ul>
         <li>测试1</li>
         <li>测试2</li>
         <li>测试3</li>
         <li>测试4</li>
         <li>测试5</li>
      </ul>
      <script>
         const box = document.querySelector('div')
         console.dir(box)
         const nav = document.querySelector('.nav')
         console.dir(nav)
         const li = document.querySelector('ul li:nth-child(2)')
         li.style.color = 'red'
         console.log(li)
         const lis = document.querySelectorAll('ul li')
         console.log(lis)
         const h = document.querySelector('.header')
         h.innerText = '我是修改后的文字'
         h.innerHTML = '<h1>我是修改后的html</h1>'
      </script>
   </body>
</html>